import React, { Component } from 'react'
import './Serch.css'
import nothing from '../../../assets/img/nothing.jpg'

import axios from 'axios'

export default class Serch extends Component {
  state = {
    showPage: false,
    value: ' ',
    listItems: [],
    plug: false

  }

  handleChangInput = (e) => {
    let val = e.target.value
    //  console.log(val);
    this.setState({
      value: val
    })
  }
  handleSub = () => {
    let val = this.state.value
    axios.get(`https://show.maoyan.com/maoyansh/myshow/ajax/search/0;k=${val};st=0;p=1;s=20;tft=0?sellChannel=13&cityId=1&lng=0&lat=0`)
      .then(res => {

        let result = res.data.data.performanceVOList
        // console.log(result);
        if (result.length > 0) {
          this.setState({
            showPage: true,
            listItems: result,
            plug: false
          })
        } else {
          this.setState({
            showPage: false,
            plug: true
          })
        }
      }).catch(error => {
        console.log(error);
      })
  }

  render() {
    return (
      <div className='serch'>
        {/* 搜索框开始 */}
        <div className="serch-input">
          <i></i>
          <input type="text"
            value={this.state.value}
            onChange={this.handleChangInput}
            placeholder="找明星·演出·场馆"
          />
          <span onClick={this.handleSub}>确定</span>
        </div>
        {/* 搜索框结束 */}

        {/* 结果展示开始 */}
        {
          this.state.showPage ?
            <div>{
              this.state.listItems.map(v => {
                return (
                  <div className="serch-item" key={v.postUrlForShare}>
                    <div className="item-img">
                      <img src={v.postUrlForShare} alt="" />
                    </div>
                    <div className="item-content">
                      <div className="title">{v.name}</div>
                      <div className="date">{v.showTimeRange}</div>
                      <div className="place">
                        <span>{v.cityName}</span>
                        <span>{v.shopName}</span>
                      </div>
                      <div className="price">
                        <div className="state">
                          <span className='state-left'>售票中</span>
                          <span>{v.priceRange}元</span>
                        </div>
                        <div className="nature">自营</div>

                      </div>
                    </div>
                  </div>
                )
              })
            }

            </div> : <div> </div>}


        {/* 结果展示结束 */}

        {/* 结果之后的提示开始 */}
        <div>
          {
            this.state.plug ? <div><img src={nothing} alt="" />  <span>没有更多数据了</span></div>:<div></div>
          }
        </div>
        <div>


          {this.state.showPage ?
            <div className='serch-tips'><span>没有更多数据了</span></div> : <div></div>
          }
        </div>
        {/* 结果之后的提示结束 */}





      </div>
    )
  }
}
